<template>
  <div>
    <el-container style="height:100%">
      <el-header height="60px" >
        <el-autocomplete
          class="input-container"
          popper-class="my-autocomplete"
          v-model="name"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        >
          <i
            class="el-icon-search el-input__icon"
            slot="suffix"
            @click="handleIconClick"
          >
          </i>
          <template slot-scope="{ item }">
            <div class="value" v-html="item.value"></div>
          </template>
        </el-autocomplete>
      </el-header>
      <el-container >
        <el-aside :style="defaultHeight">
          <el-tree
            :props="props"
            :load="loadNode"
            lazy
            accordion
            highlight-current
          >
            <span slot-scope="{ node, data }">
              <i :class="data.icon"></i>
              <span style="padding-left: 4px; font-size: 15px">{{
                node.label
              }}</span>
            </span>
          </el-tree>
        </el-aside>
        <el-main :style="defaultHeight">Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {
  getRootTypes,
  getSecondTypes,
  getNames,
  getNamesByLikeName,
} from "../api/read_api.js";
export default {
  name: "Api",
  data() {
    return {
      props: {
        label: "label",
        children: "children",
        isLeaf: "leaf",
      },
      data: [],
      name: "",
      searchNames: [],
      defaultHeight: {
        height: "",
      },
    };
  },
  created() {
    //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  methods: {
    loadNode(node, resolve) {
      console.log(node);
      let that = this;
      let temp = [];
      if (node.level === 0) {
        let userId = "1";
        getRootTypes(userId).then((res) => {
          console.log("===============0==================");
          temp = res.records;

          for (let i = 0; i < temp.length; i++) {
            that.data.push({
              id: temp[i].typeParentId,
              label: temp[i].typeParentName,
              icon: "el-icon-folder-opened",
              leaf: false,
            });
          }
          console.log("===============0==================");
          console.log(that.data);
          return resolve(that.data);
        });
      }
      if (node.level === 2) {
        console.log("=======node========");
        console.log(node.label);
        console.log(node.data.id);
        that.data = [];

        if (node.level === 2) {
          getNames(node.data.id).then((res) => {
            temp = res.records;
            for (let i = 0; i < temp.length; i++) {
              that.data.push({
                id: temp[i].id,
                label: temp[i].name,
                icon: "el-icon-document",
                leaf: true,
              });
            }
            return resolve(that.data);
          });
        }
        // console.log("===========-");
      }
      if (node.level === 1) {
        console.log("=============log=================");
        console.log(node.label);
        console.log(node.data.id);
        getSecondTypes(node.data.id).then((res) => {
          that.data = [];
          console.log(res.records);
          temp = res.records;
          for (let i = 0; i < temp.length; i++) {
            that.data.push({
              id: temp[i].typeSecondId,
              label: temp[i].typeSecondName,
              icon: "el-icon-document",
              leaf: false,
            });
          }
          return resolve(that.data);
        });
      }
    },
    querySearch(queryString, cb) {
      console.log("=========queryString==========");
      console.log(queryString);
      getNamesByLikeName(queryString).then((res) => {
        console.log(res);
        // var results = res.records;
        let results = [];
        for (let i = 0; i < res.records.length; i++) {
          results[i] = {
            value: this.showData(res.records[i].name),
            address: res.records[i].id,
          };
        }

        console.log(results);
        cb(results);
      });
      // var restaurants = this.restaurants;
      // var results = queryString
      //   ? restaurants.filter(this.createFilter(queryString))
      //   : restaurants;
      // // 调用 callback 返回建议列表的数据
      // cb(results);
    },
    createFilter(queryString) {
      return (searchData) => {
        return (
          searchData.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    checkPara(val, para) {
      if (val.indexOf(para) !== -1 && para !== "") {
        return true;
      } else {
        return false;
      }
    },
    showData(val) {
      val = val + "";
      if (this.checkPara(val, this.name)) {
        //如果搜索结果记录包含关键字中的任何一个，那么修改样式
        return val.replaceAll(
          this.name,
          "<a style='color: red'>" + this.name + "</a>"
        );
      } else {
        return val; //不做任何修改
      }
    },
    drugsName() {
      return this.name.replace(/<[^>]+>/g, "");
    },
    handleSelect(item) {
      // console.log(item);
      //  let data = {
      //   value: item.address,
      // };
      this.name = this.drugsName();
    },
    handleIconClick(ev) {
      // console.log(ev);
    },

    //定义方法，获取高度减去头尾
    getHeight() {
      console.log(window.innerHeight)
   
      this.defaultHeight.height = window.innerHeight - 80 + "px";
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #ccc;
  text-align: center;
  align-content: center;
  width: 100%;
}

.input-container {
  float: right;
  padding: 10px;
}

.el-aside {
  background-color: #fff;
  text-align: center;
  border: 2px solid #ccc;
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.el-main {
  background-color: #f3f3f3;
  text-align: center;
  align-content: center;
  border: 1px solid red;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 10px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 14px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: skyblue !important;
    }
  }
}
</style>